<script setup lang="ts">
import { Query, PageVO, typeList, taskAddForm } from "@/api/curriculum/types";
import { getCategoryList, getTaskList, getTaskAdd, getTaskEdit, postTaskDel } from "@/api/curriculum/index";
import type { FormInstance, FormRules } from 'element-plus'

const queryFormRef = ref(ElForm); // 查询表单
const loading = ref(false);

const tableData = ref<PageVO[]>();

const queryParams = reactive<Query>({});

const ruleFormRef = ref<FormInstance>();

/**
 * 查询
 */
function handleQuery() {
  loading.value = true;
  getCategoryList(queryParams)
    .then(({ data }) => {
      tableData.value = data;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}

// 弹窗数据
const dialog = reactive({
  visible: false,
  title: "新增",
})

// 提交数据
const formData = reactive<taskAddForm>({
  pid: '',
  sort: '',
})

// 提交正则
const rules = reactive<FormRules>({
  title: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
  pid: [{ required: true, message: '请选择顶级分类', trigger: 'change' }]
})

// 获取素材分类顶级列表
const selectList = ref<typeList[]>([]);
const openDialog = (data: any | null = null) => {
  dialog.visible = true;
  dialog.title = "新增";
  if (data) {
    formData.id = data.id;
    formData.pid = data.pid;
    formData.title = data.title;
    formData.sort = data.sort;
    dialog.title = "编辑";
  }
  // 获取课程分类顶级列表
  getTaskList().then(({ data }) => {
    selectList.value = data;
  });
}

// 刪除数据
const handleDelete = async (id: number) => {
  await ElMessageBox.confirm("确定要删除吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",

  }).then(async () => {
    let res = await postTaskDel({ id: id }) as any;
    ElMessage.success(res.msg);
    handleQuery();
  }).catch(() => {
    ElMessage({
      type: "info",
      message: "已取消删除",
    });
  });
};

// 关闭弹窗
const closeDialog = () => {
  dialog.visible = false;
}

// 提交数据
const handleSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (dialog.title == "编辑") {
        let res = await getTaskEdit(formData) as any;
        ElMessage.success(res.msg);
      } else {
        let res = await getTaskAdd(formData) as any;
        ElMessage.success(res.msg);
      }
      resetQuery();
      closeDialog();
    }
  })
}

onMounted(() => {
  handleQuery(); // 初始化用户列表数据
});

</script>


<template>
  <div class="app-container">
    <!-- 查询 -->
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="素材分类名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="输入素材分类名称查询" clearable style="width: 200px"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between">
          <div>
            <el-button @click="openDialog('')" type="success"><i-ep-plus />新增</el-button>
          </div>
        </div>
      </template>
      <el-table :data="tableData" row-key="id" border default-expand-all :tree-props="{
        children: 'child'
      }">
        <el-table-column prop="sort" label="编号" align="center" width="100" />
        <el-table-column prop="title" label="分类名称" />
        <el-table-column prop="sum" label="素材数量" sortable align="center" />
        <el-table-column label="操作" fixed="right" align="center" width="280">
          <template #default="scope">
            <el-button type="primary" size="small" @click="openDialog(scope.row)"><i-ep-edit />编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)"><i-ep-delete />删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="dialog.visible" :title="dialog.title" width="600px" append-to-body @close="closeDialog">
      <el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="素材分类名称" prop="title">
          <el-input v-model="formData.title" placeholder="请输入用户名" />
        </el-form-item>

        <el-form-item label="顶级素材分类" prop="pid">
          <el-select v-model="formData.pid" placeholder="选择顶级分类">
            <el-option v-for="(item) in selectList" :key="item.id" :label="item.title" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="formData.sort" placeholder="请输入排序" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit(ruleFormRef)">确 定</el-button>
          <el-button @click="closeDialog">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
